<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.header {
				background-color: #fff;
			}

			.user-info {
				display: flex;
				align-items: center;
				padding: 20px;
				padding-top: 25px;
			}

			.user-info .pic {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				margin-right: 20px;
			}

			.user-info .desc .username {
				font-size: 20px;
				font-weight: 650;
			}

			.user-info .desc .address {
				font-size: 14px;
				color: #9c9c9c;
				font-weight: 650;
			}

			.pindan,
			.setting {
				border-radius: 15px;
				padding: 4px 8px;
				/* height: 30px; */
				font-size: 12px;
				border: 1px solid #000;
			}

			.pindan {
				margin-right: 10px;
			}

			.main {
				margin-top: 10px;
			}

			.dingdan {
				padding: 10px;
				background-color: #fff;
				margin-bottom: 10px;
			}

			.dingdan .top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20px;

			}

			.dingdan .top .title {
				font-size: 20px;
				font-weight: 600;
			}

			.dingdan .top .more {
				font-size: 16px;
			}

			.dingdan .bottom .nav {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				gap: 10px;
			}

			.dingdan .bottom .nav .nav-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.dingdan .bottom .nav .nav-item img {
				width: 100%;
				height: 60px;
				margin-bottom: 10px;
			}

			.dingdan .bottom .nav .nav-item div {
				font-size: 14px;
			}

			.shop {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				padding: 0 10px;
				gap: 10px;
			}

			.shop-item {
				border-radius: 8px;
				background-color: #fff;
				overflow: hidden;
			}

			.shop-item img {
				width: 100%;
				height: 120px;
			}

			.shop-item .info {
				padding: 10px;
			}

			.shop-item .info .title {
				font-size: 16px;
			}

			.shop-item .info .price {
				font-weight: 700;
				font-size: 16px;
				color: #e44f48;
			}

			.shop-item .info span {
				font-size: 20px;
			}
		</style>
	</head>

	<body>
		<header class="header">
			<div class="user-info">
				<img class="pic" src="images/cbd.jpg" alt="" />
				<div class="desc">
					<div class="username mui-ellipsis">
						独步行者 <span class="mui-icon mui-icon-arrowright"></span>
					</div>
					<div class="address">
						收货地址 <span class="mui-icon mui-icon-arrowright"></span>
					</div>
				</div>
				<div class="pindan">
					免单返现金
				</div>
				<div class="setting">
					设置
				</div>
			</div>
		</header>
		<div class="main">
			<div class="dingdan">
				<div class="top">
					<div class="title">
						我的订单
					</div>
					<div class="more">
						查看更多 <span class="mui-icon mui-icon-arrowright"></span>
					</div>
				</div>
				<div class="bottom">
					<div class="nav">
						<div class="nav-item">
							<img src="images/cbd.jpg" alt="" />
							<div>代付款</div>
						</div>
						<div class="nav-item">
							<img src="images/cbd.jpg" alt="" />
							<div>代付款</div>
						</div>
						<div class="nav-item">
							<img src="images/cbd.jpg" alt="" />
							<div>代付款</div>
						</div>
						<div class="nav-item">
							<img src="images/cbd.jpg" alt="" />
							<div>代付款</div>
						</div>
						<div class="nav-item">
							<img src="images/cbd.jpg" alt="" />
							<div>代付款</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 商品列表 -->
			<div class="shop">
				<div class="shop-item">
					<img src="images/cbd.jpg" alt="" />
					<div class="info">
						<div class="title">标题</div>
						<p class="desc">7天无理由退货</p>
						<div class="price">
							￥<span>258</span>
						</div>
					</div>
				</div>
				<div class="shop-item">
					<img src="images/cbd.jpg" alt="" />
					<div class="info">
						<div class="title">标题</div>
						<p class="desc">7天无理由退货</p>
						<div class="price">
							￥<span>258</span>
						</div>
					</div>
				</div>
				<div class="shop-item">
					<img src="images/cbd.jpg" alt="" />
					<div class="info">
						<div class="title">标题</div>
						<p class="desc">7天无理由退货</p>
						<div class="price">
							￥<span>258</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
			document.querySelector('.setting').addEventListener('tap', function() {
				mui.openWindow('grsz.html', 'grsz.html', {})
			})
		</script>
	</body>

</html>